<template>
	<view class="guess-recommend" v-if="is_individualization">
		<view class="title u-flex-center">
			<u-icon name="play-left" size="14" color="#000000"></u-icon>
			<view class="product-title u-flex u-flex-center">猜你喜欢</view>
			<u-icon name="play-right" size="14" color="#000000"></u-icon>
		</view>
		<product-list :guessRecommendBottom="guessRecommendBottom"></product-list>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import productList from './product-list.vue'
	export default {
		name: "guess-recommend",
		components: {
			productList
		},
		data() {
			return {};
		},
		props:{
			guessRecommendBottom: {
				type: Number,
				default: 20
			},
		},
		computed: {
			...mapState({
				is_individualization: state => state.guessRecommend.is_individualization,
			})
		},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	.guess-recommend {
		width: 100%;
		padding-top: 20rpx;

		.title {
			padding: 40rpx 0;
			background-color: #FFFFFF;

			.product-title {
				padding: 0 20rpx;
				line-height: 1;
				font-size: 32rpx;
				font-weight: bolder;
			}
		}
	}
</style>